<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YSL圣罗兰官方商城</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./font_3525664_hl6sgsbzfxd/iconfont.css">
    <link rel="stylesheet" href="lib/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/homepage.css">
</head>

<body>
    <!-- 注册登录层 -->
    <section class="login">
        <section class="mask">
        </section>
        <section class="lgn">
            <div class="off">关闭</div>
            <div class="login-title">欢迎登录YSL官网</div>
            <div class="choce">
                <div class="zhuce">短信快捷登录/注册</div>
                <div class="denglu">账号密码登录</div>
            </div>
            <div class="zhuce-content">
                <div class="b1"><input type="text" placeholder="手机号" name="username" id="name"><span class="err">×</span></div>
                <div class="b2">
                    <div class="yzm"><input type="password" placeholder="密码" name="userpass" id="pass"></div>
                    <!-- <div class="yanzhengma"></div> -->
                </div>
                <div class="b3">
                    <div class="b31">
                        <input type="text" placeholder="短信验证码">
                    </div>
                    <div class="b32">
                        <input type="button" value="发送验证码">
                    </div>
                </div>
                <div class="b4">
                    <p>
                        <input type="checkbox" id="agree">
                        <label for="agree">
                            我同意
                            <a href="https://policy.lorealchina.com/termsofusewebsite" target="_blank">使用条款</a>
                            和
                            <a href="https://policy.lorealchina.com/privacypolicy" target="_blank">隐私政策</a>
                        </label>
                    </p>
                </div>
                <div class="b5">
                    <button id="zc">注册</button>
                </div>
                <div class="b6">
                    <p>使用第三方账号登录</p>
                    <ul>
                        <li>
                            <a
                                href="https://open.weixin.qq.com/connect/qrconnect?appid=wx376c94aeca8fe420&redirect_uri=https%3A%2F%2Fwww.yslbeautycn.com%2Fmember%2Flogin%2FweChat%2FcallBack&response_type=code&scope=snsapi_login&state=62b26fb3-a9cb-4993-b543-57dbff17d3b7#wechat_redirec">
                                <span class="iconfont icon-weixin"></span>
                            </a>
                        </li>
                        <li>
                            <a
                                href="https://www.yslbeautycn.com/member/constructAlipayLoginURL?pageSign=PAGE_FROM_SIGN_LOGIN&deviceId=BTfpXFnQF5ZnEWY%2BfJHg1BM3LJvoAs7hhn4HwzwJhsO3Gc7meqXSQIjgIo0ezPDjA%2FK%2FmG2R2fFVp07sSkxnhPg%3D%3D">
                                <span class="iconfont icon-iconfonticons"></span>
                            </a>
                        </li>
                        <li>
                            <a
                                href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&redirect_uri=https://www.yslbeautycn.com/member/qQBack&client_id=101466990">
                                <span class="iconfont icon-QQ"></span>
                            </a>
                        </li>
                        <li>
                            <a
                                href="https://api.weibo.com/oauth2/authorize?response_type=code&redirect_uri=https://www.yslbeautycn.com/member/login/weibo/callBack&client_id=2983287192">
                                <span class="iconfont icon-weibo"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="denglu-content">
                <div class="b1"><input type="text" placeholder="手机号" name="username" id="name1"></div>
                <div class="b1"><input type="password" placeholder="密码" name="userpass" id="pass1"></div>
                <div class="b4">
                    <p>
                        <input type="checkbox" id="remember">
                        <label for="remember">
                            记住用户名
                        </label>
                        <a href="">忘记密码？</a>
                    </p>
                </div>
                <div class="b5">
                    <button id="dl">登录</button>
                </div>
                <div class="b6">
                    <p>使用第三方账号登录</p>
                    <ul>
                        <li>
                            <a
                                href="https://open.weixin.qq.com/connect/qrconnect?appid=wx376c94aeca8fe420&redirect_uri=https%3A%2F%2Fwww.yslbeautycn.com%2Fmember%2Flogin%2FweChat%2FcallBack&response_type=code&scope=snsapi_login&state=62b26fb3-a9cb-4993-b543-57dbff17d3b7#wechat_redirec">
                                <span class="iconfont icon-weixin"></span>
                            </a>
                        </li>
                        <li>
                            <a
                                href="https://www.yslbeautycn.com/member/constructAlipayLoginURL?pageSign=PAGE_FROM_SIGN_LOGIN&deviceId=BTfpXFnQF5ZnEWY%2BfJHg1BM3LJvoAs7hhn4HwzwJhsO3Gc7meqXSQIjgIo0ezPDjA%2FK%2FmG2R2fFVp07sSkxnhPg%3D%3D">
                                <span class="iconfont icon-iconfonticons"></span>
                            </a>
                        </li>
                        <li>
                            <a
                                href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&redirect_uri=https://www.yslbeautycn.com/member/qQBack&client_id=101466990">
                                <span class="iconfont icon-QQ"></span>
                            </a>
                        </li>
                        <li>
                            <a
                                href="https://api.weibo.com/oauth2/authorize?response_type=code&redirect_uri=https://www.yslbeautycn.com/member/login/weibo/callBack&client_id=2983287192">
                                <span class="iconfont icon-weibo"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </section>
    <!-- 返回顶部 -->
    <aside>
        <div class="bt-top">
            <span class="iconfont icon-xiaoxi"></span>
        </div>
        <div class="bt-bottom">
            <span class="iconfont icon-fanhuidingbu"></span>
        </div>
    </aside>
    <!-- 吸顶 -->
    <section class="header-top">
        <div class="content">
            <div class="wleft"><a href="homepage.html"><img src="./img/logo@2x.png" alt=""></a></div>
            <ul class="menu">
                <li><a href="">七夕限定礼盒</a></li>
                <li><a href="">送礼指南</a></li>
                <li>
                    <a href="">彩妆</a>
                    <div class="erji">
                        <div class="nr">
                            <ul>
                                <li>
                                    <a href="">唇部</a>
                                    <ul class="submenu">
                                        <li><a href="">唇膏</a></li>
                                        <li><a href="">唇釉</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="">面部</a>
                                    <ul class="submenu">
                                        <li><a href="">妆前隔离</a></li>
                                        <li><a href="">粉笔</a></li>
                                        <li><a href="">粉饼</a></li>
                                        <li><a href="">明彩笔</a></li>
                                        <li><a href="">散粉</a></li>
                                        <li><a href="">腮红</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="">眼部</a>
                                    <ul class="submenu">
                                        <li><a href="">眉笔</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                            </ul>
                            <div class="erji-right">
                                <div class="left">
                                    <img src="./img/erji1.png" alt="">
                                    <div><a class="underline" href="">YSL「小金条」</a></div>
                                </div>
                                <div class="right">
                                    <img src="./img/erji2.png" alt="">
                                    <div><a class="underline" href="">YSL「皮气垫」</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="">香水</a>
                    <div class="erji">
                        <div class="nr">
                            <ul>
                                <li>
                                    <a href="">女士香水</a>
                                    <ul class="submenu">
                                        <li><a href="">全新圣罗兰女士香水</a></li>
                                        <li><a href="">反转巴黎香水</a></li>
                                        <li><a href="">黑色奥飘茗香水</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="">男士香水</a>
                                    <ul class="submenu">
                                        <li><a href="">Y男士香水</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="">高定香水</a>
                                    <ul class="submenu">
                                        <li><a href="">衣典香水</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                            </ul>
                            <div class="erji-right">
                                <div class="left">
                                    <img src="./img/erji3.png" alt="">
                                    <div><a class="underline" href="">YSL「自由之水」</a></div>
                                </div>
                                <div class="right">
                                    <img src="./img/erji4.png" alt="">
                                    <div><a class="underline" href="">YSL「反转巴黎」</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="">护肤</a>
                    <div class="erji">
                        <div class="nr">
                            <ul>
                                <li>
                                    <a href="">按产品分类</a>
                                    <ul class="submenu">
                                        <li><a href="">隔离防晒</a></li>
                                        <li><a href="">卸妆清洁</a></li>
                                        <li><a href="">爽肤水</a></li>
                                        <li><a href="">精华</a></li>
                                        <li><a href="">面霜/乳液</a></li>
                                        <li><a href="">眼唇护理</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="">按功能分类</a>
                                    <ul class="submenu">
                                        <li><a href="">全效青春</a></li>
                                        <li><a href="">至臻奢护</a></li>
                                        <li><a href="">基础亮颜</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="">按系列分类</a>
                                    <ul class="submenu">
                                        <li><a href="">高能修护系列</a></li>
                                        <li><a href="">妍活青春</a></li>
                                        <li><a href="">藏金奢妍</a></li>
                                        <li><a href="">超模绝密</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                            </ul>
                            <div class="erji-right">
                                <div class="left">
                                    <img src="./img/erji5.png" alt="">
                                    <div><a class="underline" href="">YSL「夜皇后」精华</a></div>
                                </div>
                                <div class="right">
                                    <img src="./img/erji6.png" alt="">
                                    <div><a class="underline" href="">YSL「夜皇后」眼霜</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="">定制服务</a></li>
                <li><a href="">会员中心</a></li>
                <li><a href="">品牌故事</a></li>
            </ul>
            <div class="wright">
                <div><a href=""><span class="iconfont icon-fangdajing"></span></a></div>
                <div><a href=""><span class="iconfont icon-wode log"></span></a></div>
                <div><a href="car.html"><span class="iconfont icon-24gl-bag"></span></a></div>
            </div>
        </div>
    </section>
    <!-- 顶部区域 -->
    <header>
        <section class="center">
            <span class="left"><a href=""><i class="iconfont icon-wxbdingwei"></i>专柜查询</a></span>
            <span class="left"><a href="">客服中心</a></span>
            <span class="right"><a href="car.html"><i class="iconfont icon-24gl-bag"></i>购物袋</a></span>
            <span class="right log exit"><a href=""><i class="iconfont icon-wode"></i>登录丨注册</a></span>
            <span class="right"><a href="">关于我们</a></span>
            <h1><a href="homepage.html"><img src="./img/logo@2x.png" alt=""></a></h1>
        </section>

    </header>
    <!-- 导航区域 -->
    <nav>
        <section class="center">
            <ul class="menu">
                <li><a href="">七夕限定礼盒</a></li>
                <li><a href="">送礼指南</a></li>
                <li>
                    <a href="">彩妆</a>
                    <div class="erji">
                        <div class="nr">
                            <ul>
                                <li>
                                    <a href="">唇部</a>
                                    <ul class="submenu">
                                        <li><a href="">唇膏</a></li>
                                        <li><a href="">唇釉</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="">面部</a>
                                    <ul class="submenu">
                                        <li><a href="">妆前隔离</a></li>
                                        <li><a href="">粉笔</a></li>
                                        <li><a href="">粉饼</a></li>
                                        <li><a href="">明彩笔</a></li>
                                        <li><a href="">散粉</a></li>
                                        <li><a href="">腮红</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="">眼部</a>
                                    <ul class="submenu">
                                        <li><a href="">眉笔</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                            </ul>
                            <div class="erji-right">
                                <div class="left">
                                    <img src="./img/erji1.png" alt="">
                                    <div><a class="underline" href="">YSL「小金条」</a></div>
                                </div>
                                <div class="right">
                                    <img src="./img/erji2.png" alt="">
                                    <div><a class="underline" href="">YSL「皮气垫」</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="">香水</a>
                    <div class="erji">
                        <div class="nr">
                            <ul>
                                <li>
                                    <a href="">女士香水</a>
                                    <ul class="submenu">
                                        <li><a href="">全新圣罗兰女士香水</a></li>
                                        <li><a href="">反转巴黎香水</a></li>
                                        <li><a href="">黑色奥飘茗香水</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="">男士香水</a>
                                    <ul class="submenu">
                                        <li><a href="">Y男士香水</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="">高定香水</a>
                                    <ul class="submenu">
                                        <li><a href="">衣典香水</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                            </ul>
                            <div class="erji-right">
                                <div class="left">
                                    <img src="./img/erji3.png" alt="">
                                    <div><a class="underline" href="">YSL「自由之水」</a></div>
                                </div>
                                <div class="right">
                                    <img src="./img/erji4.png" alt="">
                                    <div><a class="underline" href="">YSL「反转巴黎」</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="">护肤</a>
                    <div class="erji">
                        <div class="nr">
                            <ul>
                                <li>
                                    <a href="">按产品分类</a>
                                    <ul class="submenu">
                                        <li><a href="">隔离防晒</a></li>
                                        <li><a href="">卸妆清洁</a></li>
                                        <li><a href="">爽肤水</a></li>
                                        <li><a href="">精华</a></li>
                                        <li><a href="">面霜/乳液</a></li>
                                        <li><a href="">眼唇护理</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="">按功能分类</a>
                                    <ul class="submenu">
                                        <li><a href="">全效青春</a></li>
                                        <li><a href="">至臻奢护</a></li>
                                        <li><a href="">基础亮颜</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="">按系列分类</a>
                                    <ul class="submenu">
                                        <li><a href="">高能修护系列</a></li>
                                        <li><a href="">妍活青春</a></li>
                                        <li><a href="">藏金奢妍</a></li>
                                        <li><a href="">超模绝密</a></li>
                                        <li><a href="">浏览全部</a></li>
                                    </ul>
                                </li>
                            </ul>
                            <div class="erji-right">
                                <div class="left">
                                    <img src="./img/erji5.png" alt="">
                                    <div><a class="underline" href="">YSL「夜皇后」精华</a></div>
                                </div>
                                <div class="right">
                                    <img src="./img/erji6.png" alt="">
                                    <div><a class="underline" href="">YSL「夜皇后」眼霜</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="">定制服务</a></li>
                <li><a href="">会员中心</a></li>
                <li><a href="">品牌故事</a></li>
            </ul>
            <div><a href="javascript:;">
                    <b>搜索商品</b>
                    <i class="iconfont icon-fangdajing"></i>
                </a></div>
        </section>
    </nav>
    <!-- 广告区域 -->
    <section id="banner">
        <div class="swiper-container" id="swiper1">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/banner1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="img/banner2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="img/banner3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="img/banner4.jpg" alt=""></div>
                <div class="swiper-slide"><img src="img/banner5.jpg" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination" id="swiper-pagination1"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev" id="swiper-button-prev1"></div>
            <div class="swiper-button-next" id="swiper-button-next1"></div>
        </div>
    </section>
    <!-- 产品区域 -->
    <main>
        <section class="center">
            <div class="head">
                <p class="up">Y S L&nbsp;&nbsp;&nbsp;&nbsp;F A V O R I T E S</p>
                <P class="down">明星产品</P>
            </div>
            <div class="linear">
                <ul>
                    <li class="run"><a href="">彩妆</a></li>
                    <li><a href="">香水</a></li>
                    <li><a href="">护肤</a></li>
                    <li><a href="">礼盒</a></li>
                </ul>
            </div>
            <!-- 第一个盒子 -->
            <div class="box">
                <div class="left">
                    <img src="./img/p1.png" alt="">
                </div>
                <div class="right">
                    <div class="swiper-container swiper3">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <!-- 第一个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                                <!-- 第二个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                                <!-- 第三个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <!-- 第一个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 颜色小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                                <!-- 第二个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                                <!-- 第三个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination swiper-pagination3"></div>

                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev swiper-button-prev3"></div>
                        <div class="swiper-button-next swiper-button-next3"></div>
                    </div>

                </div>
            </div>
            <!-- 第二个盒子 -->
            <div class="box">
                <div class="left">
                    <img src="./img/p2.png" alt="">
                </div>
                <div class="right">
                    <div class="swiper-container swiper3">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <!-- 第一个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div><!-- 第二个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div><!-- 第三个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <!-- 第一个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div><!-- 第一个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div><!-- 第一个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination swiper-pagination3"></div>

                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev swiper-button-prev3"></div>
                        <div class="swiper-button-next swiper-button-next3"></div>
                    </div>

                </div>
            </div>
            <!-- 第三个盒子 -->
            <div class="box">
                <div class="left">
                    <img src="./img/p3.png" alt="">
                </div>
                <div class="right">
                    <div class="swiper-container swiper3">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <!-- 第一个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div><!-- 第二个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div><!-- 第三个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <!-- 第一个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div><!-- 第一个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div><!-- 第一个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination swiper-pagination3"></div>

                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev swiper-button-prev3"></div>
                        <div class="swiper-button-next swiper-button-next3"></div>
                    </div>

                </div>
            </div>
            <!-- 第四个盒子 -->
            <div class="box">
                <div class="left">
                    <img src="./img/p4.png" alt="">
                </div>
                <div class="right">
                    <div class="swiper-container swiper3">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <!-- 第一个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div><!-- 第二个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div><!-- 第三个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <!-- 第一个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div><!-- 第一个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div><!-- 第一个 -->
                                <div>
                                    <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                    <div>
                                        <p class="title">圣罗兰细管丝绒纯口红</p>
                                        <p class="sm">裸感半哑光 颠覆而来</p>
                                        <p class="star">
                                            ★★★★★
                                        </p>
                                        <!-- 小轮播 -->
                                        <div class="swiper-container swiper2">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="color"></div>
                                                </div>
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination swiper-pagination2"></div>

                                            <!-- 如果需要导航按钮 -->
                                            <div class="swiper-button-prev swiper-button-prev2"></div>
                                            <div class="swiper-button-next swiper-button-next2"></div>
                                        </div>
                                        <p class="se">N°314 冷茶</p>
                                        <p class="di">
                                            <span>¥350</span>
                                            <span>丨</span>
                                            <span>
                                                <i class="iconfont icon-24gl-bag"></i>
                                                <b>加入购物车</b>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination swiper-pagination3"></div>

                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev swiper-button-prev3"></div>
                        <div class="swiper-button-next swiper-button-next3"></div>
                    </div>

                </div>
            </div>
        </section>
    </main>
    <!-- 服务区域 -->
    <section class="services">
        <div class="center">
            <div class="head">
                <p class="up">E X C L U S I V E&nbsp;&nbsp;&nbsp;&nbsp;S E R V I C E S Y S</p>
                <P class="down">官网专享服务</P>
            </div>
            <ul>
                <li>
                    <img src="./img/li1.png" alt="">
                    <div>
                        <p class="tou">MAKE IT YOURS<br>定制专属你的YSL</p>
                        <p class="zhong">任购臻享YSL高定包装服务， 随单赠送高定礼盒包装、定制心意卡</p>
                        <p class="xia"><a href="">了解详情</a></p>
                    </div>
                </li>
                <li>
                    <img src="./img/li2.png" alt="">
                    <div>
                        <p class="tou">ENGRAVING SERVICE<br>尊享刻字礼遇</p>
                        <p class="zhong">臻选心仪产品，选择刻字服务，镌刻专属记忆</p>
                        <p class="xia"><a href="">了解详情</a></p>
                    </div>
                </li>
                <li>
                    <img src="./img/li3.png" alt="">
                    <div>
                        <p class="tou">TRY OUT YSL<br>星品试用</p>
                        <p class="zhong">试用体验明星产品</p>
                        <p class="xia"><a href="">了解详情</a></p>
                    </div>
                </li>
                <li>
                    <img src="./img/li4.png" alt="">
                    <div>
                        <p class="tou">YSL REWARDS CLUB<br>会员中心</p>
                        <p class="zhong">多元维度会员权益，给你花式宠爱</p>
                        <p class="xia"><a href="">了解详情</a></p>
                    </div>
                </li>
            </ul>
        </div>
    </section>
    <!-- 广告2区 -->
    <section class="banner2">
        <img src="./img/banner22.png" alt="">
    </section>
    <script src="lib/swiper-bundle.min.js"></script>
    <!-- 灵感区域 -->
    <section class="lingan">
        <div class="head">
            <p class="up">Y S L&nbsp;&nbsp;&nbsp;&nbsp;B E A U T Y</p>
            <P class="down">发现灵感</P>
        </div>
        <section>
            <div class="type1">
                <img src="./img/lg1.png" alt="">
                <img src="./img/lg5.png" alt="">
            </div>
            <div class="type2">
                <img src="./img/lg2.png" alt="">
            </div>
            <div class="type1">
                <img src="./img/lg3.png" alt="">
                <img src="./img/lg6.png" alt="">
            </div>
            <div class="type1">
                <img src="./img/lg4.png" alt="">
                <img src="./img/lg7.png" alt="">
            </div>
        </section>
    </section>
    <!-- 底部区域 -->
    <footer>
        <section class="top">
            <div class="topitem">
                <img src="./img/ti1.png" alt="">
                <p class="title">独家优惠</p>
                <p class="content">独家在线产品和特权</p>
            </div>
            <div class="topitem">
                <img src="./img/ti2.png" alt="">
                <p class="title">正品保证</p>
                <p class="content">官方直供原装</p>
            </div>
            <div class="topitem">
                <img src="./img/ti3.png" alt="">
                <p class="title">免费顺丰速递</p>
                <p class="content">港澳台偏远地区除外亦可提供普通快递服务</p>
            </div>
            <div class="topitem">
                <img src="./img/ti4.png" alt="">
                <p class="title">高定礼盒</p>
                <p class="content">尊享YSL高定礼盒包装甄享官网专属定制服务</p>
            </div>
        </section>
        <section class="middle">
            <ul>
                <li>彩妆</li>
                <li>唇部</li>
                <li>面部</li>
                <li>眼部</li>
            </ul>
            <ul>
                <li>香水</li>
                <li>女士香水</li>
                <li>男士香水</li>
                <li>高定香水</li>
            </ul>
            <ul>
                <li>护肤</li>
                <li>按产品分类</li>
                <li>按功能分类</li>
                <li>按系列分类</li>
            </ul>
            <ul>
                <li>关注我们</li>
                <li>微博</li>
                <li>微信</li>
                <li>抖音</li>
                <li>小红书</li>
            </ul>
            <ul>
                <li>联系我们</li>
                <li>在线客服</li>
                <li>电话：400-820-6362</li>
            </ul>
            <ul>
                <li>订阅电子杂志</li>
                <div class="srk">
                    <input class="text" type="email" placeholder="请输入您的电子邮箱">
                    <input class="submit" type="submit" value="订阅">
                </div>
            </ul>
        </section>
        <section class="bottom">
            <p>国家药监局提示您：宣称用于祛斑美白、防晒、染发、烫发等的化妆品为特殊用途化妆品，产品标签上应标注“国妆特字”或者“国妆特进字”的标准文号。</p>
            <div>
                <div class="left">
                    <p>© 欧莱雅（中国）有限公司</p>
                    <p>中国工商</p>
                    <p>沪ICP备08100043号-28</p>
                    <p>沪公网安备 31010602001529号</p>
                </div>
                <div class="right">
                    <p>网站地图</p>
                    <p>隐私政策</p>
                    <p>使用条款</p>
                    <p>Cookies政策</p>
                </div>
            </div>
        </section>
    </footer>
</body>

</html>
<!-- 轮播图 -->
<script>
    // banner区域轮播图
    var mySwiper1 = new Swiper('#swiper1', {
        direction: 'horizontal', // 水平切换选项
        loop: true, // 循环模式选项
        autoplay: true,

        // 如果需要分页器
        pagination: {
            el: "#swiper-pagination1",
            type: "progressbar",
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '#swiper-button-next1',
            prevEl: '#swiper-button-prev1',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar1',
        },
    })
    mySwiper1.el.onmouseover = function () {
        mySwiper1.autoplay.stop();
    }
    mySwiper1.el.onmouseout = function () {
        mySwiper1.autoplay.start();
    }
    // 产品区域小轮播图
    var mySwiper2 = new Swiper('.swiper2', {
        direction: 'horizontal', // 水平切换选项
        slidesPerView: 5,
        observer: true,//当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
        observeParents: true,//修改swiper的父元素时，自动初始化swiper
        // 如果需要前进后退按钮
        navigation: {
            prevEl: '.swiper-button-prev2',
            nextEl: '.swiper-button-next2',
        },
    })
    // 产品区域大轮播
    var mySwiper3 = new Swiper('.swiper3', {
        direction: 'horizontal', // 水平切换选项
        observer: true,//当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
        observeParents: true,//修改swiper的父元素时，自动初始化swiper
        // 如果需要分页器
        pagination: {
            el: ".swiper-pagination3",
            type: "progressbar",
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next3',
            prevEl: '.swiper-button-prev3',
        },
    })
</script>
<script src="./js/jquery/jquery.min.js"></script>
<script src="./js/homepage.js"></script>
<script src="./js/tools.js"></script>